<template>
  <div @touchstart='handleTouchStart'
       @touchmove='handleTouchMove'
       @touchend='handleTouchEnd'>
    <detail-banner :sightName="sightName" 
                   :bannerImg="bannerImg"
                   :gallaryImgs="gallaryImgs"></detail-banner>
    <detail-header :scrollTop="scrollTop"></detail-header>
    <detail-list :list="list"></detail-list>
    <div class="content"></div>
  </div>
</template>

<script>
import DetailBanner from './components/Banner'
import DetailHeader from './components/Header'
import DetailList from './components/List'
import axios from 'axios'
export default {
    name:'Detail',
    components:{
        DetailBanner,
        DetailHeader,
        DetailList
    },
    data(){
        return{
            touchState:false,
            scrollTop:'',
            list:[],
            sightName:'',
            bannerImg:'',
            gallaryImgs:[]
        }
    },
    methods:{
        handleTouchStart(){
            this.touchState=true
            
        },
        
        handleTouchMove(e){
            if(this.touchState){
                 const pageY= e.touches[0].pageY
                 const clientY=e.touches[0].clientY
                 const scrollY=pageY-clientY
                 this.scrollTop=scrollY+''
            }
        },

        handleTouchEnd(){
            this.touchState=false
        },

        getDetailJson(){
            axios.get('/api/detail.json',{
                params:{
                    id:this.$route.params.id
                }
            }).then(this.getDetailJsonSucess)
        },

        getDetailJsonSucess(res){
            const rec=res.data
            if(rec.ret){
                const data=rec.data
                this.list=data.categoryList
                this.sightName=data.sightName
                this.bannerImg=data.bannerImg
                this.gallaryImgs=data.gallaryImgs
            }
        }
    },

    mounted(){
        this.getDetailJson()
    },

}
</script>

<style lang="stylus" scoped>
        .content
            height:50rem
</style>


